<!--上面导航以及搜索框-->
<template>
  <div class="seachNav">
    <div @mouseenter="enter()" class="navtop">
      <span class="icon iconfont">&#xe63b;</span>
      <span @click="jumpList">商品分类</span>
       <div class="navbox" v-show="show"  @mouseleave="out()">
      <!-- <banner-nav ></banner-nav>  -->
      <ul class="navbox-ul">
        <li v-for="item in bannernav" :key="item.name">
          <ol>
            <img :src="item.icon" />
            <span>{{ item.name }}</span>
          </ol>
          <div>
            <banner-nav-content :children="item.children" :title="item.name"></banner-nav-content>
          </div>
        </li>
      </ul>
    </div>
    </div>
   

    <ul class="navtopright">
      <li v-for="(item,index) in nav" :key="item.id" @click="jump(index)">{{ item.name }}</li>
      <!--   :class="{active:index == navindex, active1: index == 1}" -->
    </ul>
  </div>
</template>
<script>

import bannerNavContent from "../home/components/Banner_nav_content"; //子菜单的详情
import bannerIcon1 from "@/assets/icon/bannerIcon1.png";
import bannerIcon2 from "@/assets/icon/bannerIcon2.png";
import bannerIcon3 from "@/assets/icon/bannerIcon3.png";
import bannerIcon4 from "@/assets/icon/bannerIcon4.png";
import bannerIcon5 from "@/assets/icon/bannerIcon5.png";
export default {
  name: "goodsNav",
  props: {
    navindex: Number
  },
  data() {
    return {
      show: false,
      bannerIcon: [
        { bannericon: bannerIcon1 },
        { bannericon: bannerIcon2 },
        { bannericon: bannerIcon3 },
        { bannericon: bannerIcon4 },
        { bannericon: bannerIcon5 }
      ]
    };
  },
  methods: {
    enter() {
      this.show = true;
      // console.log("移入");
    },
    out() {
      this.show = false;
      // console.log("移出");
    },
    jumpList() {
      this.$router.push({
        name: "productList"
      });
    },

    jump(index) {
      // console.log(index);
      switch (index) {
        case 0:
          this.$router.push("/");
          break;
        case 1:
          this.$router.push("/brandWorld");
          break;
        case 2:
          this.$router.push({
            name: "GotoFudi",
            params: {
              id: 0
            }
          });
          break;
        case 3:
          this.$router.push({
            name: "purchaseCenter",
            params: {
              sonshow: 1
            }
          });

          break;
        case 4:
          this.$router.push({
            name: "webBulletin",
            params: {
              id: 2
            }
          });

          break;
        case 5:
          this.$router.push("/MerchantServices");
          break;
        // case 5:
        //  this.$router.push('/accountService')
        //   break

        default:
          console.log("没有点击事件");
      }
    }
  },
  created() {
    // console.log(this.$store.state.homeNav);
    // console.log(this.$store.state.bannernav);
    // console.log(this.bannerIcon);
  },
  computed: {
    nav() {
      return this.$store.state.homeNav;
    },
    bannernav() {
      let bannerArr = [...new Set(this.$store.state.bannernav)];
      let flagArr = bannerArr.map((item, index) => {
        item.icon = this.bannerIcon[index].bannericon;
        return item;
      });
      // console.log(flagArr, "获取导航信息213123131");
      return flagArr;
    }
  },
  watch: {
    bannernav(oldvalue, newvalue) {
      // console.log(oldvalue, newvalue);
    }
  },
  components: {
    bannerNavContent
  }
};
</script>
<style lang="scss" scoped>
.seachNav {
  width: 1200px;
  height: 38px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  
  .navtop {
    width: 212px;
    height: 38px;
    line-height: 38px;
    color: #ffffff;
    background-color: #409eff;
    font-size: 16px;

    span:first-child {
      padding: 0 14px;
      font-size: 16px;
    }

    span:last-child {
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
    }
  }
  .navbox {
    width: 1200px;
    height: 335px;
    margin: auto;
    // background-color: rgb(108, 85, 129);
    position: relative;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: row;

    .navbox-ul {
      width: 212px;
      display: flex;
      flex-direction: column;
      color: #fff;

      li {
        box-sizing: border-box;
        width: 212px;
        height: 67px;
        background-color: rgba($color: #409eff, $alpha: 1);
        border-top: 1px solid #fff;
        &:hover {
          background-color: #ff7e00;
        }
        &:hover div {
          display: block;
        }
        ol {
          width: 100%;
          font-size: 14px;
          cursor: pointer;
          height: 66px;
          line-height: 82px;
          display: flex;
          flex-direction: row;
          align-items: center;
          overflow: hidden;
          img {
            width: 18px;
            padding-left: 37px;
          }
          span {
            
            padding-left: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        div {
          width: 988px;
          height: 335px;
          background-color: #fff;
          // background-color: green;
          position: absolute;
          left: 212px;
          top: 0;
          display: none;
        }
      }
    }
  }

  .navtopright {
    width: 988px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    li {
      color: #333;
      font-size: 16px;
      font-weight: bold;
      user-select: none;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      letter-spacing: 1px;

      &:hover {
        color: #409eff;
      }
    }

    // .active {
    //   color: #409eff;
    // }

    // .active1 {
    //   color: #f40;
    //   transition: all 0.3s ease-in-out;

    //   &:hover {
    //     color: #0a83e7;
    //   }
    // }
  }
}
</style>
